*{
	-webkit-tap-highlight-color: transparent;
}
@import 'variable.less';
.fixTop{
	top:0;
	left:50%;
	z-index:98;
	width:50%;
}
#oppo{
	top:0;
	left:10%;
	.w(140);
}
.oppo{
	.w(140);
	top:0;
	right:10%;
}
#play{
	.t(5);
	right:10%;
	.w(35);
	.h(35);
	border:1px #fff solid;
	border-radius:50%;
	background: url("../img/music.png") no-repeat;
	background-size: 70% 70%;
	background-position: center center;
	-webkit-animation-name: rotation_music;
	animation-name: rotation_music;
}
.play_music{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}
.close_music{
	opacity:0.9;
}
@-webkit-keyframes rotation_music {
	0% {
		-webkit-transfrom: rotate(0deg)
	}

	50% {
		-webkit-transform: rotate(180deg)
	}

	100% {
		-webkit-transform: rotate(360deg)
	}
}

@keyframes rotation_music {
	0% {
		transfrom: rotate(0deg)
	}

	50% {
		transform: rotate(180deg)
	}

	100% {
		transform: rotate(360deg)
	}
}
.u-arrow-bottom {
    position: absolute;
    .b(30);
    left: 50%;
    z-index: 150;
    .w(25);
    .h(14);
    .ml(-7);
}
.pre-wrap-bottom {
    .w(24);
    .h(14);
    position: relative;
    -webkit-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}
.pre-box1, .pre-box2 {
    .h(15);
    .w(11);
    position: absolute;
    .t(-5);
    overflow: hidden;
}
.pre1, .pre2 {
    background-color: #fff;
    .w(14);
    .h(5);
    .b-r(2);
    position: absolute;
    box-shadow: 1px -1px 1px #646464;
    .t(5);
}
.pre1 {
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    .l(1);
}
.pre-box2 {
    .l(10);
}
.pre2 {
    .l(-4.5);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}
@-webkit-keyframes start {
	0%,30% {
		opacity: 0;
		-webkit-transform: translateY(10px)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate(0)
	}

	to {
		opacity: 0;
		-webkit-transform: translateY(-8px)
	}
}

@keyframes start {
	0%,30% {
		opacity: 0;
		transform: translateY(10px)
	}

	60% {
		opacity: 1;
		transform: translate(0)
	}

	to {
		opacity: 0;
		transform: translateY(-8px)
	}
}

.back{
	.w(35);
	.h(35);
	.t(5);
	.l(20);
	border:1px #fff solid;
	border-radius:50%;
	
	z-index:99;
	.backIcon{
		.w(33);
		.h(33);
		background: url("../img/back.png") no-repeat;
		background-size: 60% 60%;
		background-position: center center;
		position:relative;
	}
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,200px,0);
		transform: translate3d(0,200px,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,200px,0);
		transform: translate3d(0,200px,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
.fadeInUp {
	-webkit-animation: fadeInUp 1s ease 0s 1 normal both;
	animation: fadeInUp 1s ease 0s 1 normal both;
}

.section1{
	width:100%;
	height:100vh;
	background:url('../img/img1/bg1.jpg');
	background-size:cover;
	@media screen and (min-device-width: 700px){
		background-size:100% 120%;
		background-position:center -50%;
	}
  	@media screen and (min-width: 700px){
		background-size:100% 120%;
		background-position:center -50%;
  	}
	.text1{
		top:8%;
		left:0;
		z-index:2;
		width:100%;
		@media screen and (min-device-width: 700px){
			width:80%;
			left:10%;
		}
      	@media screen and (min-width: 700px){
			width:80%;
			left:10%;
      	}
	}
	.text2{
		top:32%;
		left:0;
		z-index:3;
		width:100%;
		opacity: 0;
		-webkit-transform: translate3d(0,200px,0);
		transform: translate3d(0,200px,0)
	}
	.text3{
		top:44%;
		left:0;
		z-index:4;
		width:100%;
	}
	.house{
		bottom:0;
		left:0;
		z-index:2;
		width:120%;
		transform:translateX(-10%);
	}
}
.upup{
	transform:translateY("-50px");
}